<template>
  <div>
        <!-- 南窗 -->
        <div>
      <h4 class="text-box">南窗</h4>
      <img src="../../assets/家具-窗户.png" alt="" class="img-window" v-for="item of 2" :key="item">
    </div>
    <div class="box">
      <div class="btn-box3">
      <div class="btn-box" v-for="item of 3" :key="item">
    <img class="img-container" src="../../assets/desktop-before-1.png" alt="">
    </div></div>
    <div class="btn-box1">
    <div class="btn-box2" v-for="item of 4" :key="item">
    <img class="img-container" src="../../assets/desktop-before-1.png" alt="">
    <img class="img-container" src="../../assets/desktop-before-2.png" alt="">
    </div></div>
    <div class="btn-box4">
      <div class="btn-box5" v-for="item of 3" :key="item">
    <img class="img-container" src="../../assets/desktop-before-2.png" alt="">
    </div></div>
  </div>
  <!-- 走廊 -->
  <div >
   <h4 class="code2">
    <img src="../../assets/door.png" alt="" class="doorBehind" >
    西
   </h4>   
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped> 
.text-box{
  text-align: center;
}
.img-window{
  margin-bottom: 5px;
  height: 60px;
  width: 80px;
  margin-left: 360px;
}
.img-container{
  height: 60px;
  width: 50px;
}
.btn-box3{
  margin-left: 100px;
}
.btn-box{
  margin-top: 40px;
}
.btn-box5{
  margin-top: 40px;
}
.btn-box1{
  margin-left: 400px;
  margin-right: 400px;
}
.btn-box2{
  margin-top: 20px;
}
.box{
  display: flex;
  float: left;
  margin-top: 60px;
}
.doorBehind{
  width:60px;
  height:70px;
}
.code2{
  margin-top: 400px;
  float:right;
  margin-right: 50px;
}
</style>